<template>
  <el-carousel trigger="click" :height="bannerHeight + 'px'">
    <el-carousel-item v-for="item in lbList" :key="item.id">
      <img :src="item.url" alt="" />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      lbList: [
        {
          id: 1,
          url: require("@/assets/images/lb1.jpg"),
        },
        {
          id: 2,
          url: require("@/assets/images/lb2.jpg"),
        },
        {
          id: 3,
          url: require("@/assets/images/lb3.jpg"),
        },
      ],
      bannerHeight: 0,
      screenWidth: 0,
    };
  },
  mounted() {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth;
    this.bannerHeight = (600 / 1550) * this.screenWidth;
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.bannerHeight = (600 / 1550) * this.screenWidth;
    };
  },
};
</script>

<style lang="less" scoped>
.el-carousel {
  width: 100%;
  img{
    width: 100%;
  }
}
</style>